<template>
<div id="table">
<Form   class="fixed"  ref="form" :model="formValidate" :rules="ruleValidate"
        :label-width="120" style="">
<p class="division" >
查看</p>
<FormItem label="产品类型：" prop="proTye">
  {{formValidate.proTye}}
  </FormItem>
<FormItem label="产品代码：" prop="proCode">
 {{formValidate.proCode}}
</FormItem>
<FormItem label="产品到期日：" prop="proEx">
   {{formValidate.proEx}}
</FormItem>
<FormItem label="数据接收日：" prop="dataDt">
   {{formValidate.dataDt}}
</FormItem>
<FormItem label="数据修改时间：" prop="proFix">
   {{formValidate.proFix}}
</FormItem>
</Form>
<Form  class="editor" ref="formValidate" :model="formValidate" :rules="ruleValidate"
        :label-width="120" style="">
<p class="division">
可编辑</p>
<FormItem label="产品名称" prop="proName">
<Input v-model="formValidate.proName" placeholder="请输入产品名称"/>
</FormItem>
<FormItem   label="产品状态" prop="proStatue">
<Select style="width:200px" placeholder="请选择销售状态" v-model="formValidate.proStatue" >
<Option v-for="item in saleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</FormItem>
<FormItem label="销售渠道" required prop="saleChan"> 
<CheckboxGroup v-model="proChannels" >
<Checkbox label="0" disabled >柜台</Checkbox>
<Checkbox label="1" disabled >网上银行</Checkbox>
<Checkbox label="2" disabled >自助设备终端</Checkbox>
<Checkbox label="3" disabled >电话自助语音</Checkbox>
<Checkbox label="4" disabled >ATM</Checkbox>
<Checkbox label="7" disabled >手机银行</Checkbox>
<Checkbox label="8" disabled >电话人工座席</Checkbox>
<Checkbox label="A" disabled >金融开放平台</Checkbox>
<Checkbox label="B" disabled >个贷系统</Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem label="营销时间" required>
<Row>
<Col span="12">
<FormItem  prop="saleStartDt">
<DatePicker type="datetime" v-model="formValidate.saleStartDt"  format="yyyy-MM-dd HH:mm" placeholder="请选择开始时间" style="width: 200px"></DatePicker>
</FormItem>
</Col>
<Col span="12" >
<FormItem  prop="saleEndDt">
<DatePicker type="datetime" v-model="formValidate.saleEndDt" format="yyyy-MM-dd HH:mm" placeholder="请选择结束时间" style="width: 200px"></DatePicker>
</FormItem>

</Col>
</Row>
</FormItem>
<FormItem label="收益类型"  prop="incomeType">
<Select style="width:200px" placeholder="请选择收益类型" v-model="formValidate.incomeType">
<Option v-for="item in rightList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</FormItem>
<FormItem label="产品收益率"  prop="proRate">
<Input v-model="formValidate.proRate" placeholder="请输入产品收益率"/>
</FormItem>
<FormItem label="营销标签" prop="marketLable">
<Input  v-model="formValidate.marketLable" placeholder="请输入营销标签"/>
</FormItem>
<FormItem label="营销提示文字" prop="marketTips">
<Input   v-model="formValidate.marketTips" placeholder="请输入营销提示文字"/>
</FormItem>
<FormItem label="产品跳转URL" prop="jumpTransactionCode">
<Input   v-model="formValidate.jumpTransactionCode" placeholder="请输入产品跳转URL"/>
</FormItem>
<FormItem style="margin-bottom: 0;text-align: left;margin-top: 20px;">
<Button type="primary" @click="handleSubmit('formValidate')" style="margin-right: 40px;">保存</Button>
<Button type="ghost" @click="resetAll(formValidate)" style="margin-left: 8px">重置</Button>
</FormItem>
</Form>
</div>
</template>

<script>

  import Regular from '../../utils/regular'
  import Date from '../../utils/date'
  import {PROTYPES} from '../../utils/common'

  export default{
    data: function () {
        let _this= this
        // let checkBTime = (rule,value,callback) => {
        //     let bTime = new Date(this.formValidate.saleStartDt);
        //     let eTime = new Date(this.formValidate.saleEndDt);
        //     if (this.formValidate.saleEndDt !== "") {
        //       if(bTime.getTime() < eTime.getTime()){
        //         callback();
        //       }else {
        //         callback(new Error('开始时间应小于结束时间'))
        //       }
        //     }else {
        //       callback();
        //     }
        //   }
        // let checkETime = (rule,value,callback) => {
        //   // debugger
        //     let bTime = new Date(this.formValidate.saleStartDt);
        //     let eTime = new Date(this.formValidate.saleEndDt);
        //     console.log(bTime)
        //     if (this.formValidate.saleStartDt !== "") {
        //       if (eTime.getTime() > bTime.getTime()) {
        //         callback();
        //       } else {
        //         callback(new Error('结束时间应大于开始时'))
        //       }
        //     } else {
        //       callback();
        //     }
        //   };

      return {
        isEdit:false,
        formValidate: {
            proTye: '',
            proCode:'',
            netDate: '',
            proEx:'',
            proFix:'',
            dataDt:'',
            proName:'',
            proRate:'',
            saleStartDt:'',
            saleEndDt:'',
            proStatue:'',
            incomeType:'',
            marketLable:'',
            marketTips:''
      },
      proChannels:[],
      saleList:[{
             value: '1',
             label: '有效可售'
                    },
                    {
              value: '0',
              label: '无效不可售'
                    },
      ],
      rightList: [
            {
            value: 'GR_ST',
            label: '业绩比较基准'
            },
            {
            value: 'YE_RA',
            label: '上日年化收益率'
            },
            {
            value: 'EX_RA',
            label: '预期年化收益率'
            },
            {
            value: 'NA_DA',
            label:'净值日期:'
            }
            ],
        ruleValidate: {
          proName: [
            { required: true, message: '请输入产品名称', trigger: 'blur' }
          ],
          proStatue: [
            { required: true, message: '请选择产品状态', trigger: 'blur' }
          ],
          saleStartDt: [
            { required: true,type: 'date',message: '请选择开始时间', trigger: 'change' },
            // { validator: checkBTime,type: 'date', trigger: 'change',pattern: /.+/ }
          ],
          saleEndDt: [
            { required: true, type: 'date',message: '请选择结束时间', trigger: 'change' },
            // { validator: checkETime,type: 'date', trigger: 'change',pattern: /.+/ }
          ],
             incomeType: [
            { required: true, message: '收益类型不能为空', trigger: 'change' }
          ],
          proRate: [
            { required: true, message: '收益率不能为空', trigger: 'blur' }
          ],
        },
        model11:'',
      }
    },
    components: {},
    methods: {
      getDetails(data){
        this.isEdit = true
        let _this = this
         this.formValidate.proTye = data.proType
        this.formValidate.proCode = data.proId
        this.formValidate.netDate = data.netDate
        this.formValidate.proEx = data.proExpire
        this.formValidate.proFix = data.proFix
        this.formValidate.dataDt = data.dataDt
        this.formValidate.proName = data.proName
        this.formValidate.proStatue = data.proStatus
        this.proChannels=data.proChannels.split("")
        this.formValidate.saleStartDt = data.saleStartDt
        this.formValidate.saleEndDt = data.saleEndDt
        this.formValidate.incomeType=data.incomeType
        this.formValidate.proRate = data.proRate
        this.formValidate.marketLable=data.marketLable
        this.formValidate.marketTips=data.marketTips
        this.formValidate.jumpTransactionCode=data.jumpTransactionCode
        // console.log( this.proChannels)
        // console.log( data.proName)
        // this.rightList[3].value = this.formValidate.netDate
        this.rightList[3].label = '净值日期：'+(this.formValidate.netDate)
    },
      handleSubmit (name) {
        let _this = this;
          let forceStop = false
       this.$refs.formValidate.validate((valid) => {
            if (valid) {
               if(this.formValidate.proName=='' || this.formValidate.proStatue==''|| this.formValidate.saleStartDt=='' || this.formValidate.saleEndDt==''||this.formValidate.proRate==''){
               forceStop = true
               return;
              }
                  this.formValidate.saleStartDt= Date.formatDate.format(this.formValidate.saleStartDt,"yyyy-MM-dd hh:mm");
                  this.formValidate.saleEndDt = Date.formatDate.format(this.formValidate.saleEndDt,"yyyy-MM-dd hh:mm");
                  if(forceStop){
                      return;
                    }
      if(this.isEdit){
              this.api({
                url: "/product/update",
                method: "post",
                params:{
                  proId: this.formValidate.proCode,
                  proName:this.formValidate.proName,
                  proStatus:this.formValidate.proStatue,
                  proChannels: this.proChannels,
                  saleStartDt:this.formValidate.saleStartDt,
                  saleEndDt:this.formValidate.saleEndDt,
                  proRate: this.formValidate.proRate,
                  incomeType:this.formValidate.incomeType,
                  marketLable:this.formValidate.marketLable,
                  marketTips:this.formValidate.marketTips,
                  jumpTransactionCode:this.formValidate.jumpTransactionCode
                
                }
              }).then(data => {
                this.$Message.success('修改产品属性成功!');
                _this.$parent.cancel()
                _this.isEdit = false
                _this.resetAll()
                _this.$emit('refreshbizlines')
              })
            }
           else {
            //this.$Message.error('Fail!');
          }





        }
       })
        },
           resetAll(){
        this.isEdit = false
        this.formValidate.proName=''
        this.formValidate.proStatue=''
        this.formValidate.saleStartDt=''
        this.formValidate.saleEndDt=''
        this.formValidate.proRate=''
        this.$refs['formValidate'].resetFields()
     },

      },
     
  
   

    
    created(){ 
     
     },
    mounted() {
    
    }
  }
</script>

<style lang="scss" scoped>
  .division {
    padding-left: 20px;
    line-height: 24px;
    border-bottom: 1px solid #e9eaec;
    margin-bottom: 20px;
  }
  .division .ivu-icon {
    line-height: 24px;
  }
  #table /deep/ .ivu-input-wrapper {
width: 72%!important
}
  #table .fixed /deep/ .ivu-form-item {
    margin-bottom: 5px;
    vertical-align: top;
    zoom: 1;
}
 #table .editor /deep/ .ivu-form-item {
    margin-bottom: 17px;
    }
 #table /deep/ .division[data-v-47a2e010] {
margin-bottom: 5px;
}
</style>
